<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport"
	content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name='format-detection' content='telephone=no' />
<title>人车人</title>
<link rel="icon" href="/assets/img/titleico.ico" type="image/x-icon">
<link rel="stylesheet" href="/assets/css/common.css" />
<link rel="stylesheet" href="/assets/css/swiper-3.4.2.min.css" />
<style>
	body {
		background-color: #f2f2f2;
	}
	
	header {
		height: 40px;
		overflow: hidden;
		position: relative;
		border-bottom: 1px solid #ccc;
	}
	
	header h2 {
		text-align: center;
		line-height: 40px;
		font-weight: normal;
		font-size: 18px
	}
	
	header .icon {
		width: 30px;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-align-items: center;
		align-items: center;
    	-webkit-justify-content: flex-end;
    	justify-content: flex-end;
    	padding-right: 19px
	}
	
	header .user {
		right: 0;
		left: inherit;
		padding-right: 19px;
	}
	
	header .icon img {
		width: 12px;
	}
	
	header .user img {
		width: 20px;
	}
	
	header .user a {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
	}
	
	section {
		margin-top: 19px;
		padding: 0 10px 10%;
	}
	
	section .wrapper {
		border-radius: 5px;
		background-color: #fff;
		padding: 7px;
		padding-bottom: 15%;
	}
	
	section .wrapper .title {
		height: 38px;
		-webkit-align-items: center;
		align-items: center;
		border-bottom: 1px solid #ccc;
	}
	
	section .wrapper .title img {
		width: 18px;
	}
	
	section .wrapper .title span {
		color: #999;
		font-size: 12px;
		margin-left: 5px;
	}
	
	section .wrapper .info ul li .tit {
		padding: 12px 0;
	    -webkit-align-items: center;
	    align-items: center;
	    font-size: 15px;
	    background-color: #fff;
	}
	
	section .wrapper .info ul li .tit img {
		width: 12px;
		-webkit-transition: transform .3s ease;
    	transition: transform .3s ease;
	}
	
	section .wrapper .info ul li .tit.show .next {
		-webkit-transform: rotate(90deg);
	    transform: rotate(90deg);
	}
	
	section .wrapper .info ul li .tit span {
		font-size: 14px;
		flex: 1;
	}
	
	section .wrapper .info ul li .tit .left {
		width: 4px;
		margin-right: 8px;
	}
	
	section .wrapper .info ul li .hidden {
		position: relative;
	    height: 0;
	    overflow: hidden;
	    -webkit-transition: .3s ease;
	    transition: .3s ease;
	}
	
	section .wrapper .info ul li .hidden .item {
		position: relative;
		border: 1px dashed #ccc;
		height: 128px;
		border-right: 0;
		border-radius: 5px;
		margin-bottom: 10px;
	}
	
	section .wrapper .info ul li .hidden .item .look {
		position: absolute;
		top: -1px;
		right: 0;
		bottom: -1px;
		border: 1px solid #ccc;
		width: 29px;
		-webkit-align-items: center;
		align-items: center;
		font-size: 13px;
		color: #999;
		padding: 0 6px;
		line-height: 22px;
		border-radius: 0 5px 5px 0;
	}
	
	section .wrapper .info ul li .hidden .item .upload {
		margin: 23px auto 13px;
	    width: 62px;
	    height: 62px;
	    position: relative;
	    background-image: url(/assets/img/upload_4.png);
	    background-repeat: no-repeat;
	    -webkit-background-size: cover;
	    background-size: cover;
	}
	
	section .wrapper .info ul li .hidden .item .upload .progress {
		display: none;
	    text-align: center;
	    line-height: 60px;
	    font-size: 12px;
	    background-color: #fff;
	    position: relative;
	    z-index: 1;
	    width: 60px;
	    left: 1px;
	    top: 1px;
	    border-radius: 50%;
	}
	
	section .wrapper .info ul li .hidden .item .upload input {
		position: absolute;
	    width: 100%;
	    height: 100%;
	    opacity: 0;
	    top: 0;
	    left: 0;
	}
	
	section .wrapper .info ul li .hidden .item.success .upload {
		background-image: url(/assets/img/order_suc.png);
	}
	
	section .wrapper .info ul li .hidden .item.success .look {
		color: #f6a32d;
	}
	
	section .wrapper .info ul li .hidden .item .name {
		font-size: 13px;
		text-align: center;
	}
	
	section .wrapper a.submit {
		margin-top: 47px;
		display: block;
		width: 100%;
		height: 43px;
		line-height: 43px;
		text-align: center;
		font-size: 18px;
		color: #fff;
		background-color: #f69000;
		border-radius: 5px;
		position: relative;
	}
	
	.swiper-container {
		height: 100%;
	}
	
	.swiper-container img {
		position: absolute;
		top: 50%;
		left: 50%;
	}
	
	.swiper-pagination-bullet-active {
		background: #dadada;
	}
	
	.swiper-pagination-bullet {
		background: #fff;
	}
</style>
</head>
<body>
	<header>
		<div class="icon flexbox" id="back"><img src="/assets/img/order_back.png" /></div>
		<h2>人工评估</h2>
		<div class="icon user flexbox" id="back"><a href="#"></a><img src="/assets/img/order_user.png" /></div>
	</header>
		
	<section id="app">
		<div class="wrapper">
			<div class="title flexbox">
				<img src="/assets/img/qicheicon.png" />
				<span>请提供相应照片转至人工评估</span>
			</div>
			<div class="info">
				<ul id="ulcon">
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>车头照片</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="车头照片">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="carHead" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>车尾照片</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="车尾照片">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="carBehind" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>车身45°照</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="车身45°照">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="carSide" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>中控照片</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="中控照片">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="carConsole" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>车辆铭牌</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="车辆铭牌">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="carPlate" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>车辆发票</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="车辆发票">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="carInvoice" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
					<li class="b_bor">
						<div class="tit flexbox">
							<img class="left" src="/assets/img/xiaoyuanjiao-icon-orcshibie@2x.png" />
							<span>登记证书</span>
							<img src="/assets/img/next.png" class="next" width="12" height="21">
						</div>
						<div class="hidden">
							<div class="item" data-vaildate="0" tip="登记证书1-2页">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="registration1" />
								</div>
								<p class="name">上传照片</p>
							</div>
							<div class="item" data-vaildate="0" tip="登记证书3-4页">
								<div class="look flexbox" src="">点击预览</div>
								<div class="upload">
									<p class="progress">0%</p>
									<input type="file" name="registration2" />
								</div>
								<p class="name">上传照片</p>
							</div>
						</div>
					</li>
				</ul>
			</div>
			<a href="javascript:;" class="submit" id="submit">提交</a>
		</div>
	</section>
	
	<div id="show-template" class="show-template trans">
		<div class="loading"></div>
		<div class="swiper-container">
			<div class="swiper-wrapper">
				
			</div>
			<div class="swiper-pagination"></div>
		</div>
	</div>
	
	<script src="/assets/js/fastclick.min.js"></script>
	<script src="/assets/js/jquery-3.1.1.min.js"></script>
	<script src="/assets/js/axios.min.js"></script>
	<script src="/assets/js/xxsg.js"></script>
	<script src="/assets/js/swiper-3.4.2.jquery.min.js"></script>
	<script>
		$(function(){
			var ulcon = $("#ulcon")
			
			$('#back').click(function(){
		    	window.history.go(-1);
		    });
			
			var accept = "image/jpg, image/jpeg, image/png, image/gif"
   			if(_x.isAndroid()){
   				accept = "image/*"
   			}
			
			ulcon.find("input[type='file']").each(function(){
				$(this).attr("accept", accept)
			})
			
			//点击展开
        	ulcon.children().children(".tit").click(function() {
        		var that = $(this),
        			hideDom = that.siblings('.hidden')
        		
        		showHidden(that.hasClass("show"), that, hideDom, true)
        	})
        	
        	function showHidden (type, titleDom, hideDom, isHide) {
            	if (type && isHide) {
            		hideDom.css({height: 0, overflow: 'hidden'})
        			titleDom.removeClass("show")
            	} else {
            		hideDom.css({height: hideDom[0].scrollHeight})
        			titleDom.addClass("show")
            	}
            }
			
			//上传控件
            ulcon.find("input[type=file]").change(function(){
                var that = $(this),
                	file = that[0].files[0];
                if(file){ 
                	var dianIndex = file.name.indexOf("."),
                		name = "";
	                //验证格式
	                if(dianIndex != -1){
	                	name = file.name.substring(dianIndex);
	                	if(!_x.isImage(name)){
	                        _x.showTip("请上传图片，格式为jpg/jpeg/png/gif");
	                        that.val("");
	                        return false;
	                    }
	                }
	                
                    //验证大小
                    if(file.size > 10485760){
                        _x.showTip("图片大小超出限制");
                        that.val("");
                        return false;
                    }
                   
                    upload_file(file,that);
                }
            });
            
            //上传
            function upload_file(file,fileDom){
                var xhr = new XMLHttpRequest(),
                    formData = new FormData(),
                    uploadDom = fileDom.parents(".item")
                
                fileDom.hide()
                fileDom.siblings("p.progress").text("0%").show()
                    
                formData.append(fileDom.attr("name"),file);
                xhr.open("post","/makeprice/submitCred/1",true);
                xhr.addEventListener("load",function(){
                    var result = JSON.parse(this.response);
                 	fileDom.show()
                 	fileDom.siblings("p.progress").hide()
                 	uploadDom.addClass("success")
                 	uploadDom.data("vaildate", 1)
                 	uploadDom.children(".look").attr("src", result.src)
                });

                xhr.upload.addEventListener('progress',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                    if(e.lengthComputable){//是否可以计算上传字节数
                        var percent = parseInt(e.loaded / e.total * 100); 
                        fileDom.siblings("p.progress").text(percent + "%")
                    };
                });
                
                xhr.addEventListener('error',function(e){//监听XMLHttpRequest对象的progress事件，读取完毕后触发
                	_x.showTip("上传失败,请检查您的网络！");
                	fileDom.show()
                	fileDom.siblings("p.progress").hide()
                });
                
                xhr.send(formData);
            }
            
          	//预览图
            var mySwiper = new Swiper('.swiper-container', {
				pagination: '.swiper-pagination',
				autoplayDisableOnInteraction: false
			})
			
          	//模板展示
           	var templateDom = $("#show-template"),
           		$win_Width = $(window).width(),
           		$win_Height = $(window).height(),
           		templateImg = null;
            
           	templateDom.on("touchmove",function(e){
           		e.preventDefault();
           	});
           	
           	//关闭
           	templateDom.on("click",".swiper-container",function(e){
           		templateImg = null;
           		templateDom.removeClass("visible");
           		templateDom.children(".loading").removeClass("animatie").hide();
           	});
           	
           	templateDom.on("transitionend",function(){
           		if(!$(this).hasClass("visible")){
           			$(this).children("img").attr("src","").removeClass("show");
           		}
          	})
          	
           	//显示模板
            ulcon.on("click",".look",function(){
            	var that = $(this),
            		sildeArr = [],
            		srcArr = []
            	
            	if (!_x.isEmpty(that.attr("modelpath"))) {
            		var modelpath = that.attr("modelpath"),
            			modelname = that.attr("modelname").split(",")
            		
            		for (var i = 0; i < modelname.length;i++) {
            			var name = modelname[i].substring(0, modelname[i].indexOf("."))
            			sildeArr.push(["<div class='swiper-slide' index='"+ i +"'><img /><p>"+ name +"</p></div>"])
            			srcArr.push(modelpath + modelname[i])
            		}	
            			
            	} else {
            		var src = that.attr("src")
            		if (!_x.isEmpty(src)) {
	            		sildeArr.push(["<div class='swiper-slide' index='0'><img /></div>"])
	            		srcArr.push(src)
            		}
            	}
            	
            	if(sildeArr.length === 0){
            		_x.showTip("暂无预览图片！");
            		return;
            	}
            	
            	templateDom.addClass("visible")
            	templateDom.children(".loading").addClass("animatie").show()
            	
            	mySwiper.removeAllSlides()
            	mySwiper.appendSlide(sildeArr)
            	
            	for (var i = 0; i < srcArr.length; i++) {
            		var image = new Image()
            		image.src = srcArr[i]
            		image.index = i
            		image.onload = function () {
            			var imgW = this.width,
	            			imgH = this.height,
	            			data = _x.imgFormat(imgW,imgH,$win_Width,$win_Height),
	            			slideDom = templateDom.find("div.swiper-slide[index='"+ this.index +"']")
	            		slideDom.addClass("load-hook").children("img").css({
	            			"width":data.imgWidth,
	            			"height":data.imgHeight,
	            			"margin-left": - data.imgWidth / 2,
	            			"margin-top": - data.imgHeight / 2
	            		}).attr("src", this.src)
	            		
	            		if (slideDom.siblings().length > 1) {
	            			var mark = true
	            			slideDom.siblings().each(function(){
		            			if (!$(this).hasClass("load-hook")) {
		            				mark = false
		            				return false
		            			}
		            		})
		            		
		            		if (mark) {
		            			templateDom.children(".loading").removeClass("animatie").hide()
		            		}
	            			
	            		} else {
	            			templateDom.children(".loading").removeClass("animatie").hide()
	            		}
            		}
            		
            		image.onerror = function () {
            			templateDom.children(".loading").removeClass("animatie").hide()
            		}
            	}
            })
            
            var submitMark = true
            $("#submit").click(function(){
            	var that = $(this)
            	if (!submitMark) {
            		return
            	}
            	
            	submitMark = false
            	
            	vaildate(function(mark) {
            		if (mark) {
            			that.html("<div class='textloading'></div>")
            			axios.post("/makeprice/submitOrderFinal").then(function(res){
            				if (res.data.code == 1) {
            					_x.removeSessionStorage("carConfigur")
								_x.removeSessionStorage("xxIdentify")
            					_x.showTip(res.data.msg, {
            						url: "/userCenter"
            					})
            				} else {
            					that.html("提交")
            					_x.showTip(res.data.msg)
            					submitMark = true
            				}
            			}).catch(function(){
            				that.html("提交")
           					_x.showTip("提交失败，请稍后重试！")
           					submitMark = true
            			})
            		} else {
            			submitMark = true
            		}
            	})
            })
            
            function vaildate (fn) {
           		var mark = true
           		ulcon.find("div.item").each(function(){
           			var that = $(this)
           			if (that.data("vaildate") == 0) {
           				mark = false
           				_x.showTip("请上传" + that.attr("tip") + "！")
           				return false
           			}
           		})
           		fn(mark)
           	}
		})
	</script>
</body>
</html>
